<template>
  <a-modal
    v-model="visible"
    width="50vw"
    :bodyStyle="{ padding: '10px 20px'}"
    title="清洗方案库维护"
    :confirmLoading="loading"    
    @ok="handleOk"
    @cancel="handleCancel"
  >      
    <div>
      <a-form-model ref="ruleForm" :model="dataForm" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 15 }">
        <a-row :gutter="24">
          <a-col :span="12">
            <a-form-model-item label="清消方案编号">
              <a-input v-model="dataForm.schemeNoStr" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="上品种编号">
              <a-input v-model="dataForm.upProdNo" disabled/>
            </a-form-model-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="12">
             <a-form-model-item label="上品种名称">
              <a-input v-model="dataForm.upProdName" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="下品种编号"  >
              <a-input v-model="dataForm.downProdNo" disabled/>
            </a-form-model-item>
          </a-col>
        </a-row>        
        <a-row :gutter="24">
          <a-col :span="12">
             <a-form-model-item label="下品种名称">
              <a-input v-model="dataForm.downProdName" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="配料差异">
             <template v-if="!dataForm.upDiff && !dataForm.downDiff">
                <sapn>无</sapn>
              </template>
              <template v-else>
                <sapn>上：
                  <span v-html="dataForm.upDiff"></span>
                  <!-- <span class="warn">xxxx</span> -->
                </sapn>
                <sapn style="margin-left:10px;">下：
                  <span v-html="dataForm.downDiff"></span>
                </sapn>
              </template>
            </a-form-model-item>
          </a-col>
        </a-row>   

        <a-row :gutter="24">
          <a-col :span="12">
             <a-form-model-item label="清洗方案">
              <a-input v-model="dataForm.washWayCode" disabled/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="系统"  >
              <a-input :value="dataForm.systemName" disabled/>
            </a-form-model-item>
          </a-col>
        </a-row> 
        <a-row :gutter="24">
          <a-col :span="12">
             <a-form-model-item label="清洗时长(h)">
              <a-input-number v-model="dataForm.washDuration" style="width:100%"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
            <a-form-model-item label="顶料量(kg)"  >
              <a-input-number v-model="dataForm.subWeight" style="width:100%"/>
            </a-form-model-item>
          </a-col>
        </a-row>      
        <a-row :gutter="24">
          <a-col :span="12">
             <a-form-model-item label="顶料时长(h)">
              <a-input-number v-model="dataForm.subDuration" style="width:100%"/>
            </a-form-model-item>
          </a-col>
          <a-col :span="12">
             <a-form-model-item label="转规时长(h)">
              <a-input-number v-model="dataForm.specDuration" style="width:100%"/>
            </a-form-model-item>
          </a-col>
           
        </a-row> 
        <a-row :gutter="24">
          <a-col :span="12">
             <a-form-model-item label="转标时长(h)">
              <a-input-number v-model="dataForm.labelDuration" style="width:100%"/>
            </a-form-model-item>
          </a-col>
        </a-row>      
      </a-form-model> 
    </div>
  </a-modal> 
</template>
<script>
import {getAction, postAction,getActionAsync } from '@/api/manage'
import { ClearLibMixin } from '@/mixins/ClearLibMixin'
export default {
  name: 'BurdenAddModal',
  mixins: [ClearLibMixin],
  props: {
  },
  data() {
    return {
      visible: false,
      dataForm: {},
      rules: {
        orderType: [{ required: true, message: '请输入', trigger: 'blur' }],
        orderName: [{ required: true, message: '请输入', trigger: 'blur' }],
        cancelMemo: [{ required: true, message: '请输入', trigger: 'blur' }],
      },
      loading: false,
      modalType: '', // add新增  upd修改
      url: {
        save: '/hteWashScheme/save',
        queryById: '/hteWashScheme/info/' 
      },
       
      tabLoading: false,
      dictList: [],
    }
  },
  mounted() {
  },
  methods: {
    showVisible(id) {      
      if(id){        
        this.modalType = 'upd'
        this.initData(id) // 修改        
      }
      this.modalType = 'add'
      this.visible = true            
    },
    handleCancel() {
      this.visible = false
      this.dataForm = {}
      this.fileData = []
      this.selectedRowKeys = []
      this.selectionRows = []
      this.$refs.ruleForm.resetFields()
    },
    handleOk(){
      this.loading = true
      this.$refs.ruleForm.validate(valid => {
        if (valid) { 
          this.dataForm.wathType = this.wathType 
          postAction(this.url.save, this.dataForm).then(res => {
            if (res.success) {
              this.$emit('ok')
              this.handleCancel()
              this.$message.success('修改成功')
            } else {
              this.$message.error('操作失败:' + res.message)
            }
          })                                      
        }        
      })
      this.loading = false
    },
    initData(id){
      this.loading = true
      getAction(this.url.queryById +id).then(res => {
        if (res.success) {
          this.dataForm = res.result
          this.fileData = res.result.systemList 
        } else {
          this.$message.error('查询失败:' + res.message)
        }
        this.loading = false
      })
    },
    /**
     * 适用系统与清洗时长关系表
     */
    async handleChange(e, record, index){             
      // //todo 根据系统编号查询对应的时长    
      // let res = await this.searchAwait(e)
      // if(!res) return
      // this.$set(this.fileData[index], 'time', res.applyDeptId)
    },
    async searchAwait(id){
      let result = null     
      await getActionAsync(this.url.queryOrderById, {id: 134 || id}).then((res) => {
        if (res.code == 200) {
          // todo 根据系统编号查询对应的时长        
          result = res.result 
        } else {
          this.$message.warning('操作数据出错:' + res.message)
        }
      })
      return result 
    },
    onSelectChange(selectedRowKeys, selectionRows) {
      this.selectedRowKeys = selectedRowKeys;
      this.selectionRows = selectionRows;
    },
    handAction(type) {
      switch (type) {
        case 'add':
          // 新增
          this.selectedRowKeys = []
          this.selectionRows = []
          this.fileData.push({rowKey: this.fileData.length})
          break
        case 'del':
          // 删除，可多选
          const that = this
          if (this.selectedRowKeys.length == 0) {
            this.$message.warning('请选择至少一条数据！')
            return
          }
          this.$confirm({
            title: '确认删除',
            content: '请确认是否删除此系统?',
            onOk: function () {
              that.selectionRows.forEach(key => {              
                const index = that.fileData.findIndex(v => v.rowKey === key.rowKey);
                if(index != -1){
                  that.fileData.splice(index, 1);  
                }              
              });
            },
          })
          break
        default:
          break
      }
    }
  },
}
</script>
<style lang="less" scoped>
.section-header {
  font-size: 16px;
  font-weight: bold;
  position: relative;
  padding-left: 14px;
  color: #333333;
  margin-bottom: 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  .title{position: relative;
    &:before {
      content: '';
      position: absolute;
      top: 10%;
      width: 4px;
      left: -13px;
      background-color: #47a4fa;
      border-radius: 1px;
      height: 80%;
    }
  }  
  .btn-line {flex: 1;display: flex;justify-content: flex-end;
    button{margin-right: 10px;
      &:last-of-type{margin-right: 0;}
    }
  }
}
</style>
